<template>
    <div class="app-container calendar-list-container">
        <search :list="queryList" :queryEntity="queryEntity"></search>
        <buttons :showQuery="true" :showBack="false" @query="doQuery" :list="btnList" :disabled="disabled"
            placeholder="订单号" :permissions="permissions" @add="doAdd"></buttons>
        <grid gridTitle="加工单" :url="url" :columns="columns" :enableEdit="false" :loading="true" ref="mainGrid"
            height="auto" diffHeight="145" :pagination="true" :permissions="permissions" :multi="true"
            @change="rowCilck" :queryEntity="queryEntity">
        </grid>
        <!--弹出-->
        <div>
            <el-dialog title="对账明细" :visible.sync="dialogVisible" width="90%" @opened="loadData">
                <div>
                    <el-form :model="billEntity" :rules="dataRule" ref="entity" label-width="80px" size="small">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="开始时间" prop="startDate">
                                    <el-date-picker v-model="billEntity.startDate" format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="结束时间" prop="endDate">
                                    <el-date-picker v-model="billEntity.endDate" format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <grid :columns="goodsColumns" :multi="false" :url="queryGoodsUrl" ref="goodsMainGrid"
                        :loading="false" :queryEntity="goodsQueryEntity" :pagination="false" :permissions="permissions"
                        @price="editPirce">
                    </grid>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveBill">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <formDialog title="单价修改" :url="changePriceUrl" ref="formDialog" :dataRule="formDataRule" :columns="formColumns"
            @success="loadData"></formDialog>
    </div>
</template>
<script>
    import request from '@/router/axios'
    import { Message, MessageBox } from 'element-ui'
    import url from '@/const/apiURL'
    import grid from '@/components/Grid'
    import buttons from '@/components/Buttons'
    import { mapGetters } from 'vuex'
    import { BusinessOrderStatusFormatter, BusinessTypeFormatter, YesOrNoFormatter } from '@/const/dict'
    import search from '@/components/Search'
    import { colunms } from '@/const/colunms'
    import { dict } from '@/const/dict'
    import { queryField } from '@/const/query'
    import formDialog from '@/components/FormDialog'
    import { formData } from '@/const/formData'

    export default {
        components: { grid, buttons, search, formDialog },
        data() {
            return {
                queryGoodsUrl: url.BILL_BUSINESS_DETAIL_URL,
                changePriceUrl: url.BUSINESS_PRICE_URL,
                dialogVisible: false,
                formColumns: formData().priceChange.columns,
                formDataRule: formData().priceChange.dataRule,
                orderNo: '',
                goodsQueryEntity: { orderNos: ['1'] },
                url: url.BUSINESS_LIST_URL,
                entity: {},
                queryEntity: { businessType: 'IN', orderStatus: 'FINISH', billStatus: 0, noOrderAll: true },
                disabled: true,
                goodsColumns: [
                    { label: '加工单号', width: 180, prop: 'businessCode', align: 'center' },
                    { label: this.global.modelName, width: 100, prop: 'goodsName', align: 'center' },
                    { label: this.global.modelProp, width: 80, prop: 'modelProp', align: 'center' },
                    { label: '物料名称', width: 300, prop: 'materialName', align: 'center' },
                    { label: '物料类型', width: 100, prop: 'materialTypeName', align: 'center' },
                    { label: '单位', width: 80, prop: 'unit', align: 'center' },
                    { label: '单价', width: 80, prop: 'price', align: 'center' },
                    { label: '匹数', width: 80, prop: 'total', align: 'center' },
                    { label: '数量', width: 100, prop: 'quantity', align: 'center' },
                    { label: '总价', width: 120, prop: 'totalAmount', align: 'center' },
                    {
                        label: '操作', width: 80, prop: 'op', align: 'center', template: 'op', opList: [
                            { name: '单价', clickName: 'price', auth: 'm_business_price', showFomatter: function (row) { return row.status != null } }
                        ]
                    },
                ],
                columns: [
                    { label: '大货订单', width: 180, prop: 'orderNo', align: 'left' },
                    { label: '加工单号', width: 180, prop: 'businessCode', align: 'left' },
                    { label: '外部单号', width: 160, prop: 'outBusinessCode', align: 'left' },
                    { label: '工序', width: 100, prop: 'stepName', align: 'left' },
                    { label: '业务类型', width: 80, prop: 'businessType', align: 'center', formatter: BusinessTypeFormatter },
                    { label: '客户名称', width: 200, prop: 'customerName', align: 'center' },
                    { label: '仓库名称', width: 120, prop: 'warehouseName', align: 'center' },
                    { label: '数量', width: 80, prop: 'quantity', align: 'center' },
                    { label: '单价', width: 80, prop: 'price', align: 'center' },
                    { label: '扣款', width: 60, prop: 'deductionAmount', align: 'center' },
                    { label: '发货时间', width: 100, prop: 'sendTime', align: 'center' },
                    { label: '对账单号', width: 180, prop: 'billNo', align: 'center' },
                    { label: '是否对账', width: 80, prop: 'billStatus', align: 'center', formatter: YesOrNoFormatter },
                    { label: '订单状态', width: 80, prop: 'orderStatus', align: 'center', formatter: BusinessOrderStatusFormatter },
                    { label: '创建人', width: 80, prop: 'createUserName', align: 'center' },
                    { label: '创建时间', width: 100, prop: 'createTime', align: 'center' }
                ],
                btnList: [
                    { name: '生成对账单', type: 'primary', icon: 'edit', click: 'add', auth: 'business_finance_add', ctr: true, confirm: true }
                ],
                queryList: [
                    { name: '加工单号', type: 'text', prop: 'businessCodeLike', placeholder: "加工单号" },
                    { name: '大货订单', type: 'query', prop: 'orderNo', rowValue: 'orderNo', rowName: 'orderNo', url: url.ORDER_LIST_URL, columns: colunms().orderColumns, pagination: true, queryList: queryField().order, queryEntity: { status: 1 }, autoInput: true },
                    { name: '工序', type: 'query', prop: 'stepCode', rowValue: 'stepCode', rowName: 'stepName', url: url.STEP_LIST_URL, columns: colunms().stepColumns, pagination: true, queryList: queryField().step, queryEntity: { status: 1 } },
                    { name: '外部单号', type: 'text', prop: 'outBusinessCode', placeholder: "外部单号" },
                    { name: '对账状态', type: 'select', prop: 'billStatus', placeholder: "对账状态", values: dict().YesOrNo, label: 'name', value: 'value' },
                    { name: '客户名称', type: 'query', prop: 'customerCode', rowValue: 'customerCode', rowName: 'customerName', url: url.CUSTOMER_LIST_URL, columns: colunms().customerColumns, pagination: true, queryList: queryField().customer, queryEntity: { customerType: 'HANDLE' } },
                    { name: '创建时间', type: 'date', prop: 'startTime', placeholder: "" },
                    { name: '----', type: 'date', prop: 'endTime', placeholder: "" }
                ],
                billEntity: {
                    startDate: null,
                    endDate: null
                },
                dataRule: {
                    startDate: [
                        { required: true, message: '开始时间不能为空', trigger: 'blur' }
                    ],
                    endDate: [
                        { required: true, message: '结束时间不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
        },
        computed: {
            ...mapGetters(['permissions'])
        },
        methods: {
            doQuery(text) {
                this.$refs['mainGrid'].doQuery(text)
            },
            rowCilck(row) {
                this.disabled = row.length == 0
            },
            doAdd() {
                this.dialogVisible = true
            },
            loadData() {
                const rows = this.$refs['mainGrid'].getCurrentRows()
                let orderNos = [];
                rows.forEach(element => {
                    orderNos.push(element.businessCode)
                });
                this.$refs['goodsMainGrid'].doQuery(null, { orderNos })
            },
            editPirce(row) {
                if (row) {
                    this.$refs['formDialog'].show(row)
                }
            },
            saveBill() {
                this.$refs['entity'].validate((valid) => {
                    if (valid) {
                        const rows = this.$refs['mainGrid'].getCurrentRows()
                        let orderNos = [];
                        rows.forEach(element => {
                            orderNos.push(element.businessCode)
                        });
                        if (orderNos.length > 0) {
                            this.addOp(orderNos, this.billEntity.startDate, this.billEntity.endDate).then(data => {
                                if (data) {
                                    this.doQuery()
                                    this.dialogVisible = false
                                }
                            })
                        }
                    }
                })
            },
            addOp(orderNos, startDate, endDate) {
                return request({
                    url: url.FINA_BUSINESS_BILL_ADD_URL,
                    method: 'post',
                    data: { orderNos, startDate, endDate }
                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .w-body {
        padding-top: 8px;
    }

    .w-table {
        border: 1px solid #ebeef5;
    }

    .w-table-title {
        border: 1px solid #ebeef5;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        vertical-align: middle;
        width: 100%;
        font-size: 14px;
        color: gray;
    }
</style>